import React, { useEffect, useRef, useState } from 'react';
import { getSwiperAPI, getGroupAPI, getNewsAPI, getAreaInfoAPI } from '../../apis/home';
import { Button, Space, Swiper, Toast, Grid, List, Image } from 'antd-mobile';
import { getCurrentCity } from '../../utils';
// import { DemoBlock, DemoDescription } from 'demos';
import './index.scss';
import { baseURL } from '../../utils/request';

import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
import { useNavigate } from 'react-router-dom';
import SearchBar from '../../components/searchbar';


export default function Home() {
    // H5 获取位置信息
    // navigator.geolocation.getCurrentPosition(position => {
    //     console.log(position)
    // })
    const navigate = useNavigate()
    useEffect(() => {
        async function getSwiper() {
            const res = await getSwiperAPI()
            // console.log(res.body)
            setImgLists(res.body)
        }
        async function getGroup() {
            const res = await getGroupAPI()
            // console.log(res.body)
            setGroupLists(res.body)
        }
        async function getNews() {
            const res = await getNewsAPI()
            // console.log(res.body)
            setNewsLists(res.body)
        }
        getSwiper()
        getGroup()
        getNews()
    }, [])
    const [imgLists, setImgLists] = useState([])
    const [groupLists, setGroupLists] = useState([])
    const [newsLists, setNewsLists] = useState([])
    const items = imgLists.map((imgList, index) => (<Swiper.Item key={imgList.id}>
        <div className='home__content' onClick={() => {
            Toast.show(`你点击了卡片 ${index + 1}`);
        }}>
            <img className='home__swiper' src={baseURL + imgList.imgSrc} />
        </div>
    </Swiper.Item>));
    const ref = useRef(null);
    const navLists = [
        {
            id: 1,
            img: Nav1,
            title: '整租',
            path: '/list'
        },
        {
            id: 2,
            img: Nav2,
            title: '合租',
            path: '/list'
        },
        {
            id: 3,
            img: Nav3,
            title: '地图找房',
            path: '/map'
        },
        {
            id: 4,
            img: Nav4,
            title: '去出租',
            path: '/rent'
        }
    ]
    return (
        <>
            <div style={{ position: 'relative' }}>
                <Swiper
                    className='home__swiper'
                    loop
                    autoplay
                >
                    {items}
                </Swiper>
                <div className='home__search__bar' >
                    <SearchBar />
                </div>
            </div>
            <Space className='home__nav__list'>
                {navLists.map((item, index) => (
                    <div className='home__nav' key={item.id} onClick={() => navigate(item.path)}>
                        <img src={item.img} />
                        <span>{item.title}</span>
                    </div>
                )
                )}
            </Space>
            {/* 个人小组 */}
            <div className='home__group'>
                <div className='home__group__content'>
                    <h3 className='home__group__title'>
                        租房小组 <span className='more'>更多</span>
                    </h3>
                    <Grid columns={2} gap={8}>
                        {groupLists.map((item, index) => (
                            <Grid.Item className='home__group__item' key={item.id}>
                                <div className='grid-demo-item-block'>
                                    <p>{item.title}</p>
                                    <span>{item.desc}</span>
                                </div>
                                <img src={baseURL + item.imgSrc} />
                            </Grid.Item>
                        )
                        )}
                    </Grid>
                </div>
            </div>
            {/* 咨询 */}
            <List header='最新资讯' className='home__news'>
                {newsLists.map(item => (
                    <List.Item
                        key={item.id}
                        prefix={
                            <Image
                                src={baseURL + item.imgSrc}
                                fit='cover'
                            />
                        }
                    >
                        <div>
                            <p>{item.title}</p>
                            <span className='from'>{item.from}</span>
                            <span className='date'>{item.date}</span>
                        </div>
                    </List.Item>
                ))}
            </List>
        </>
    )
}
